<script setup>
import { ref, inject } from 'vue'
// 在setup中 用defineProps defineEmits defineExpose 定义props emit 暴露出的变量
const props = defineProps({
  todo: {
    type: String,
    required: true
  },
  listTitle: {
    type: String,
    default: '我是标题'
  }
})
const emit = defineEmits(['remove'])
const aaa = ref('我是子组件暴露出的变量')
const bbb = ref('我没暴露')
defineExpose({
  aaa: aaa,
})
// provide inject
const { location, updateLocation } = inject('locationFromBase')
</script>

<template>
  <li>
    <span>{{listTitle}} -- </span>
    <span>{{todo}} </span>
    <span>
      <slot></slot> 
      <slot name="abc"></slot> 
    </span> 
    <button @click="emit('remove', todo)">x</button>
    <div>
      <span>provide inject: {{location}}</span>
      <button @click="updateLocation">change</button>
    </div>
  </li>
</template>

<style lang="less" scoped>
</style>
